<template>
  <div class="ques">
    <p class="q-cont">{{quesData.totalSort ? quesData.totalSort + '.' : ''}}<span v-html="quesData.questionContent"></span>{{quesData.score ? '（' + quesData.score + '分）' : ''}}</p>
    <el-radio-group v-model="radio" class="q-radio-group" @change="handleOptionChange">
      <el-radio v-for="item in quesData.options" :label="item.value" :key="item.value">{{item.value}}.<span v-html="item.content"></span></el-radio>
    </el-radio-group>
    <div class="answer-area" v-if="showAnswer">
      <dl>
        <dt>答案：</dt>
        <dd>{{quesData.rightAnswer}}</dd>
      </dl>
      <dl>
        <dt>得分：</dt>
        <dd>{{quesData.studentScore}}</dd>
      </dl>
      <dl>
        <dt>解析：</dt>
        <dd>{{quesData.analysis ? quesData.analysis : '略'}}</dd>
      </dl>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
  props: {
    onChange: Function,
    quesData: Object,
    showAnswer: Boolean
  },
  watch: {
    quesData() {
      this.radio = '';
    }
  }
})
export default class SingleChoice extends Vue {
  quesData: ObjectT = {};
  onChange!: (type: number, totalSort: number, value: string) => {};
  showAnswer!: boolean;
  radio = '';
  created() {
    if (this.showAnswer) {
      this.radio = this.quesData.studentAnswer ? this.quesData.studentAnswer : '';
    } else {
      this.radio = this.quesData.answer ? this.quesData.answer : '';
    }
  }
  // 处理选项change
  handleOptionChange(value: string) {
    if (this.showAnswer) {
      this.radio = this.quesData.studentAnswer ? this.quesData.studentAnswer : '';
      return;
    }
    if (this.onChange) {
      this.onChange(1, this.quesData.totalSort, value);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import './common.scss';
</style>
<style lang="scss">
.ques {
  img {
    display: inline-block;
    vertical-align: middle;
    max-width: 95%;
  }
}
.q-cont {
  span {
    p {
      display: inline;
    }
  }
}
.q-radio-group {
  display: block;
  .el-radio {
    display: block;
    margin-bottom: 33px;
  }
  .el-radio__label,
  .el-radio__inner {
    display: inline-block;
    vertical-align: middle;
  }
  .el-radio__label {
    font-size: 16px;
    color: $text-black;
    font-weight: normal;
    padding-left: 25px;
    p {
      display: inline;
    }
  }
  .el-radio__inner {
    width: 16px;
    height: 16px;
  }
  img {
    display: inline-block;
    vertical-align: middle;
    max-width: 95%;
  }
}
</style>
